<template>
  <div>
    <a-modal
      :width="800"
      :bodyStyle="{'min-height':'400px',paddingLeft:'0px'}"
      title="添加区块"
      :visible.sync="editModalVisible"
      @cancel="handleCancleDbSync"
      :footer="false"
    >
      <a-tabs tabPosition="left">
        <a-tab-pane key="1" tab="基本区块">
          <a-form-model>
            <template v-for="(item,i) in compData">
                <a-form-model-item :label="item.name" :key="i">
                  <a-checkbox
                    v-for="(child,index) in item.children"
                    :key="index"
                    :checked="getLayoutComp[child.comp] && getLayoutComp[child.comp].length>=1"
                    @change="formChange(child,$event)"
                  >
                    {{child.title}}
                  </a-checkbox>
                </a-form-model-item>
            </template>
          </a-form-model>
        </a-tab-pane>
        <a-tab-pane key="2" tab="在线图表" force-render>
          <chart-list :layout="layout" @add="handleAdd" @delete="handleDel"></chart-list>
        </a-tab-pane>
        <a-tab-pane key="4" tab="online表单">

        </a-tab-pane>
      </a-tabs>
    </a-modal>
  </div>
</template>
<script>
import ChartList from '../modules/ChartList'
export default {
  name: 'HomePageModal',
  components: {
    ChartList
  },
  props: {
    layout: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    getLayoutComp() {
      const layoutComp = {}
      this.layout.forEach(item => {
        const key = item.data.comp
        const value = item.data.code ? item.data.code : item.data.comp
        !layoutComp[key] ? layoutComp[key] = [value] : layoutComp[key].push(value)
      })
      return layoutComp
    }
  },
  data() {
    return {
      editModalVisible: false,
      compData: [
        {
          name: '个人办公',
          children: [
            { code: '', title: '待办事项', url: '/task/MyTaskList', comp: 'MyTaskList' },
            { code: '', title: '我发起的流程', url: '/task/MyApplyProcessList', comp: 'MyApplyProcessList' }
          ]
        },
        {
          name: '其他',
          children: [
            { code: '', title: '系统消息', url: '/isps/userAnnouncement', comp: 'Notice' },
            // { code: '', title: 'app日程', url: '', comp: 'TodoWork' },
            { code: '', title: '常用流程', url: '', comp: 'OftenApply' },
            { code: '', title: '我的会议', url: '/online/cgformList/dba3227173484a01860f9102bee7ee4a', comp: 'Meeting' },
            { code: '', title: '公文', url: '/officedoc/OfficedocReceivedList', comp: 'OfficedocReceivedList' }
          ]
        }
      ]
    }
  },
  methods: {
    handleDel(i) {
      this.$emit('delete', i)
    },
    handleAdd(data, comp) {
      this.$emit('add', data, comp)
    },
    handleCancleDbSync() {
      this.editModalVisible = false
    },
    formChange(data, event) {
      if (event.target.checked) {
        this.handleAdd(data)
      } else {
        const i = this.getLayoutI(data.comp)
        this.handleDel(i)
      }
    },
    getLayoutI(comp) {
      let i = ''
      this.layout.forEach(item => {
        if (comp === item.data.comp) {
          i = item.i
        }
      })
      return i
    }
  }
}
</script>
<style lang="less">

</style>
